<template>
    <div class="home-set main-content" v-loading="isLoading">
        <el-page-header class="list-head" @back="goBack" content="巡更详情"></el-page-header>
        <div class="patrol-info-main">
            <span>
                <div class="patrol-item"><span class="patrol-item-name">巡更区域：</span> {{$route.query.name}}</div>
                <div class="patrol-item">
                    <span class="patrol-item-name">巡更点：</span
                    ><span v-for="(point, $index) in pointList">{{point.point_name}}{{$index !== pointList.length-1?'、':''}}</span>
                </div>
            </span
            ><span v-show="$route.query.name && pointName">
                <el-popover
                    placement="top-start"
                    width="200"
                    trigger="hover">
                    <img class="project-er" style="width: 200px;height: 200px" :src="$IMGURL+'/api/v1/patrol/qrcode.jpg?field_name='+$route.query.name+'&point_name='+pointName"/>
                    <img slot="reference" style="width: 100px;height: 100px" :src="$IMGURL+'/api/v1/patrol/qrcode.jpg?field_name='+$route.query.name+'&point_name='+pointName"/>
                </el-popover>
            </span>
        </div>
        <el-tabs :value="activeName" @tab-click="changeTabs">
            <el-tab-pane label="巡更记录" name="first" lazy>
                <v-patrolList :patrolPointList="pointList" :name="$route.query.name" :staffList ="staffList" :lineList="lineList" v-if="activeName==='first'"></v-patrolList>
            </el-tab-pane>
            <el-tab-pane label="巡更路线" name="second" lazy>
                <v-patrolLine :patrolPointList="pointList" :name="$route.query.name" :staffList ="staffList" v-if="activeName==='second'"></v-patrolLine>
            </el-tab-pane>
            <el-tab-pane label="巡更点" name="three" lazy>
                <v-patrolPoint :patrolPointList="pointList" :name="$route.query.name" :staffList ="staffList" v-if="activeName==='three'" @listenEvent="pointParentBtn"></v-patrolPoint>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>

<script>
    import PatrolList from './PatrolList';
    import PatrolLine from './PatrolLine';
    import PatrolPoint from './PatrolPoint';
    export default {
        components: {
            'v-patrolList': PatrolList,
            'v-patrolLine': PatrolLine,
            'v-patrolPoint': PatrolPoint
        },
        data() {
            return {
                isLoading: false,
                activeName: 'first',
                staffList: [],
                lineList: [],
                pointList: [],
                pointName: ''
            }
        },
        created() {
            
            this.isLoading = true;
            let pointList = this.$http.get(`/api/v1/patrol/point?patrol_field=${this.$route.query.id}`)
            .then((res) => {
                this.pointList = res.data;
            })
            .catch(() => {})
            let staffList = this.$http.get(`/api/v1/user/admin/`)
            .then((res) => {
                this.staffList = res.data;
            })
            .catch(() => {})
            let lineList = this.$http.get(`/api/v1/patrol/route/?patrol_field=${this.$route.query.id}`)
            .then((res) => {
                this.lineList = res.data;
            })
            .catch(() => {})
            this.$http.requestAll([pointList, staffList, lineList])
            .then(() => {
                this.isLoading = false;
            })
            .catch(() => {
                this.isLoading = false;
            })
        },
        methods: {
            // 返回上一页
            goBack() {
                this.$router.go(-1);
            },
            changeTabs(val) {
                this.activeName = val.name;
                this.pointName = '';
            },
            pointParentBtn(val) {
                this.pointName = val
            }
        }
    }
</script>

<style lang="scss" scoped>
    .patrol-info-main {
        margin: 16px 0;
        display: flex;
        justify-content: space-between;
    }
    .patrol-item {
        margin-top: 12px;
        .patrol-item-name {
            font-weight: bold;
        }
    }
</style>